import {computed, DefineComponent, defineComponent, nextTick, ref,} from "vue";
import {NImage, NPopover, NCard, NDescriptionsItem, NDescriptions, NDropdown, NDivider, NIcon,} from "naive-ui"
import {Refresh,} from "@vicons/tabler"
import {FileOpenOutlined,} from "@vicons/material"
import {DownloadOutlined, ShareAltOutlined, CopyOutlined, InfoCircleOutlined, DeleteOutlined,} from "@vicons/antd"
import {Rename28Regular, Cut24Regular,} from "@vicons/fluent"
import Openfile from "../openfile"
export default defineComponent({
    name: "pingpu",
    props: ["size", "fileList", "selectid"],
    emits: ["select", "dbclick","selectkey"],
    setup({size, fileList, selectid,}, {emit}) {
        const waike = ref<null | HTMLElement>(null)
        const startX = ref(0)
        const startY = ref(0)
        const width = ref(0)
        const height = ref(0)
        // 获取框选范围的标签
        const getSelectDiv = () => {
            let result: Array<any> = []
            const kuangtop = height.value > 0 ? startY.value : startY.value + height.value
            const kuangbottom = height.value > 0 ? startY.value + height.value : startY.value
            const kuangleft = width.value > 0 ? startX.value : startX.value + width.value
            const kuangright = width.value > 0 ? startX.value + width.value : startX.value
            const children = waike.value?.children
            if (children && children!.length > 0) {
                Object.keys(children!).forEach((suoyin: any, index) => {
                    const {left, right, top, bottom} = children![suoyin].getClientRects()[0]
                    const sigejiao = [[left, top], [right, top], [left, bottom], [right, bottom]]
                    // 如果四个角有一个角再框选的范围内，就被选中
                    sigejiao.forEach(item => {
                        if (item[0] > kuangleft && item[0] < kuangright && item[1] > kuangtop && item[1] < kuangbottom) {
                            result.push(fileList[index].id)
                        }
                    })
                })
            }
            if (result.length > 0) {
                result = Array.from(new Set(result))
            }
            emit("select", result)
        }
        // 单击的标记
        let danji: any = null
        // 点击背景
        const clickkong = (e: MouseEvent) => {
            emit("select", [])
        }
        // 框选操作
        const kuangxuan = (e: MouseEvent) => {
            let index = 0
            const react = waike.value?.getClientRects()[0]!
            e.preventDefault()
            e.stopPropagation()
            startX.value = e.clientX
            startY.value = e.clientY
            let linshi: number | null = null
            document.onmousemove = (newe) => {
                index = index + 1
                // 更新结束位置
                width.value = newe.clientX - startX.value
                height.value = newe.clientY - startY.value
                // 设置防抖
                if (linshi) {
                    clearTimeout(linshi)
                }
                // 延时处理元素的被选中状态
                linshi = setTimeout(() => {
                    // 处理框选
                    getSelectDiv()
                    linshi = null
                }, 0)
            }
            document.onmouseup = (newe) => {
                newe.preventDefault()
                newe.stopPropagation()
                console.log(newe, newe.type, newe.button, "*******onmouseup点击的键********")
                // 如果是右键弹起，那么什么都不做,只响应左键弹起的操作
                if (newe.button === 0) {
                    // 移动少于5次，就判断为点击
                    // 延时一个点击背景的方法，如果出发了点击元素，就取消吊点击背景
                    if (index < 5) {
                        danji = setTimeout(() => {
                            clickkong(newe)
                        }, 200)
                    }
                }
                // 重置数据
                startX.value = 0
                startY.value = 0
                width.value = 0
                height.value = 0
                // 重置监听
                document.onmousemove = null
                document.onmouseup = null
            }
        }

        // 点击元素,
        const clickItem = (e: MouseEvent, row: any) => {
            console.log(e, e.type, "*******点击的键********")
            // 阻止冒泡
            e.preventDefault()
            e.stopPropagation()
            if (danji) {
                clearTimeout(danji)
            }
            danji = setTimeout(() => {
                // 抛出方法
                emit("select", [row.id])
            }, 200)


        }
        // 双击元素
        const shuangji = (e: MouseEvent, row: any) => {
            console.log(e, e.type, "*******点击的键********")
            // 阻止冒泡
            e.preventDefault()
            e.stopPropagation()
            if (danji) {
                clearTimeout(danji)
                danji = null
            }
            // 抛出方法
            emit("dbclick", [row.id])
        }

        // 文件右键菜单
        const fileOptions = ref([
            {
                label: "打开", key: "open", icon: () => <NIcon size={16}>
                    <FileOpenOutlined/>
                </NIcon>
            },
            {type: "render", render: () => <NDivider class="!m-2 w-100px"/>},
            {
                label: "下载", key: "ceshi02", icon: () => <NIcon size={16}>
                    <DownloadOutlined/>
                </NIcon>
            },
            {
                label: "分享", key: "ceshi03", icon: () => <NIcon size={16}>
                    <ShareAltOutlined/>
                </NIcon>
            },
            {type: "render", render: () => <NDivider class="!m-2 w-100px"/>},
            {
                label: "复制", key: "ceshi06", icon: () => <NIcon size={16}>
                    <CopyOutlined/>
                </NIcon>
            },
            {
                label: "剪切", key: "ceshi06", icon: () => <NIcon size={16}>
                    <Cut24Regular/>
                </NIcon>
            },
            {
                label: "重命名", key: "ceshi06", icon: () => <NIcon size={16}>
                    <Rename28Regular/>
                </NIcon>
            },
            {
                label: "删除", key: "ceshi06", icon: () => <NIcon size={16}>
                    <DeleteOutlined/>
                </NIcon>
            },
            {type: "render", render: () => <NDivider class="!m-2 w-100px"/>},
            {
                label: "属性", key: "ceshi06", icon: () => <NIcon size={16}>
                    <InfoCircleOutlined/>
                </NIcon>
            },
        ])
        const fileDropdown = ref(false)
        const fileX = ref(0)
        const fileY = ref(0)
        // 桌面右键菜单
        const desktopOptions = ref([
            {
                label: "刷新", key: "ceshi01", icon: () => <NIcon size={16}>
                    <Refresh/>
                </NIcon>
            },
            {type: "render", render: () => <NDivider class="!m-2 w-100px"/>},
            {
                label: "上传", key: "ceshi02", icon: () => <NIcon size={16}>
                    <Refresh/>
                </NIcon>
            },
            {
                label: "新建文件夹", key: "ceshi03", icon: () => <NIcon size={16}>
                    <Refresh/>
                </NIcon>
            },
            {
                label: "新建文件", key: "ceshi04", icon: () => <NIcon size={16}>
                    <Refresh/>
                </NIcon>
            },
            {
                label: "粘贴", key: "ceshi05", icon: () => <NIcon size={16}>
                    <Refresh/>
                </NIcon>
            },
            {type: "render", render: () => <NDivider class="!m-2 w-100px"/>},
            {
                label: "查看", key: "ceshi06", icon: () => <NIcon size={16}>
                    <Refresh/>
                </NIcon>
            },
            {
                label: "排序", key: "ceshi06", icon: () => <NIcon size={16}>
                    <Refresh/>
                </NIcon>
            },
            {
                label: "图标", key: "ceshi06", icon: () => <NIcon size={16}>
                    <Refresh/>
                </NIcon>
            },
            {type: "render", render: () => <NDivider class="!m-2 w-100px"/>},
            {
                label: "显示选项", key: "ceshi06", icon: () => <NIcon size={16}>
                    <Refresh/>
                </NIcon>
            },
            {
                label: "属性", key: "ceshi06", icon: () => <NIcon size={16}>
                    <Refresh/>
                </NIcon>
            },
        ])
        const showDropdown = ref(false)
        const desktopX = ref(0)
        const desktopY = ref(0)
        const closeDropdown = () => {
            showDropdown.value = false
            fileDropdown.value = false
        }
        const clickOption = (key: string) => {
            emit("selectkey",key)
            closeDropdown()
        }
        // 右键点击桌面
        const showDropdownFunc = (e: MouseEvent) => {
            console.log(e, e.type, "*******点击的键********")
            e.preventDefault()
            showDropdown.value = false
            fileDropdown.value = false
            nextTick(() => {
                desktopX.value = e.clientX
                desktopY.value = e.clientY
                showDropdown.value = true
            })
        }
        // 右键点击文件
        const fileDropdownFunc = (e: MouseEvent, row: any) => {
            e.stopPropagation()
            e.preventDefault()
            showDropdown.value = false
            fileDropdown.value = false
            emit("select", [row.id])
            nextTick(() => {
                fileX.value = e.clientX
                fileY.value = e.clientY
                fileDropdown.value = true
            })
        }
        return () => (<div
            class="w-full h-full overflow-x-hidden overflow-y-auto flex flex-wrap justify-start content-start"
            onMousedown={kuangxuan} onContextmenu={showDropdownFunc} ref={waike}>
            {fileList.map((item: any) => {
                return <NPopover raw={true} show-arrow={false} delay={1000} placement={"right"} v-slots={{
                    trigger: () => <div
                        class={["flex flex-col justify-center items-center m-10px p-10px border border-blue-200 cursor-pointer hover:bg-blue-200", item.selected ? "bg-blue-200" : "", item.id === selectid.value ? "border-opacity-100" : "border-opacity-0"]}
                        style={{width: `${size.value + 10}px`, height: `${size.value * 1.5 + 10}px`}}
                        onClick={(e: MouseEvent) => clickItem(e, item)}
                        onContextmenu={(e) => fileDropdownFunc(e, item)}
                        onDblclick={(e: MouseEvent) => shuangji(e, item)}>
                        <NImage src={item.url} previewDisabled={true}/>
                        <p class="line-clamp-2">{item.name}</p>
                    </div>
                }}>
                    <NDescriptions label-placement="left" column={1} class="bg-yellow-100 p-2 w-200px">
                        <NDescriptionsItem v-slots={{label: () => <span class="font-semibold">文件名称</span>}}>
                            <p>{item.name}</p>
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{label: () => <span class="font-semibold">文件大小</span>}}>
                            {item.size}
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{label: () => <span class="font-semibold">创建时间</span>}}>
                            {item.createdTime}
                        </NDescriptionsItem>
                        <NDescriptionsItem v-slots={{label: () => <span class="font-semibold">修改时间</span>}}>
                            {item.changeTime}
                        </NDescriptionsItem>
                    </NDescriptions>
                </NPopover>
            })}
            <div class="fixed bg-blue-400 bg-opacity-50" style={{
                left: `${width.value > 0 ? startX.value : startX.value + width.value}px`,
                width: `${Math.abs(width.value)}px`,
                top: `${height.value > 0 ? startY.value : startY.value + height.value}px`,
                height: `${Math.abs(height.value)}px`
            }}/>
            <NDropdown
                placement={"bottom-start"}
                trigger={"manual"}
                x={desktopX.value}
                y={desktopY.value}
                options={desktopOptions.value}
                show={showDropdown.value}
                onClickoutside={closeDropdown}
                onSelect={clickOption}
            />
            <NDropdown
                placement={"bottom-start"}
                trigger={"manual"}
                x={fileX.value}
                y={fileY.value}
                options={fileOptions.value}
                show={fileDropdown.value}
                onClickoutside={closeDropdown}
                onSelect={clickOption}
            />
        </div>)
    }
})
